<template>
  <view>
      <view>
        <view v-show="isTip" @touchmove.stop.prevent="stopSlide">
          <view class="mask" @click="isTip=false"></view>
          <view class="tip">点击右上角分享符，分享有礼 ↑</view>
        </view>
      </view>
      <view class="infoH">
        <button class="button" v-if="!study" @click="showStudy">学习模式</button>
        <button class="button" v-if="study" @click="showStudy">填空模式</button>
        <button class="button" @click="showALL">全部({{goods.jkNum===null?0:goods.jkNum}})</button>
        <button class="button" @click="showZW(1)">已掌握({{goods.jkNumZw===null?0:goods.jkNumZw}})</button>
        <button class="button" @click="showZW(0)">未掌握({{goods.jkNumWZw===null?0:goods.jkNumWZw}})</button>
      </view>
      <view v-if="study">
        <view class="info">
          <div v-html="goods.materialNameS"/>
        </view>
        <view class="separate">
          <view class="imagel" @click="toLeft">
            <image src="/static/images/toLeft.png" @click="toLeft"/>
          </view>
          <view class="imager" @click="toRight">
            <image src="/static/images/toRight.png" @click="toRight"/>
          </view>
        </view>
        <view class="infoD">
          <span style="color:rgb(153, 153, 153);" @click="showJkT" v-if="!showT">点击查看答案</span>
          <span @click="showJkT" v-else><div v-html="goods.materialNametS"/></span>
        </view>
      </view>
      <view v-else>
        <view class="info">
          <div v-html="goods.materialNametS"/>
        </view>        
        <view class="separate">
          <view class="imagel" @click="toLeft">
            <image src="/static/images/toLeft.png" @click="toLeft"/>
          </view>
          <view class="imager" @click="toRight">
            <image src="/static/images/toRight.png" @click="toRight"/>
          </view>
        </view>        
        <view class="infoD">
          {{ materialNameSTK[0]+' ' }}
          <span style='border-bottom:2px solid #26aa4e;'><input style='color:#26aa4e;outline:none;background-color:#eeeeee;width:10ch' type='text' name='tk64021' autocomplete='off'></span>
          {{ ' '+materialNameSTK[1] }}
        </view>
      </view>     
      <view class="footer">
          <view class="footer_btn">
            <view class="image" @click="playVoice">              
                <image src="/static/images/voice.png"/>
            </view>
            <view class="imager" @click="isHold(1)">
                <image src="/static/images/right.png" v-if="holdRight"/>
                <image src="/static/images/rightA.png" v-else/>
            </view>
            <text>{{goods.index?goods.index:1}}/{{goods.jkNum===null?0:goods.jkNum}}</text>
            <view class="imagew" @click="isHold(0)">
                <image src="/static/images/wrong.png" v-if="holdWrong"/>
                <image src="/static/images/wrongA.png" v-else/>
            </view>
          </view>
      </view>
  </view>
</template>
<script>
var config = require('../../../config.js');
var http = require('../../../utils/httpHelper.js');
import wx from 'weixin-js-sdk';
export default {
  data() {
      return {
          //是否自动切换
          current: 0,
          //滑动时间
          clas: ['action'],
          goodsData: [],
          goodsDataAll: [],
          curD: 0,
          userInfo: {},
          isLogin: false,
          indicatorDots: true,
          //是否显示面板指示点
          autoplay: false,
          //是否自动切换
          interval: 5000,
          //自动切换时间
          duration: 1000,
          //滑动时间
          buyCount: 1,            
          goods: {},
          docUrl: '',
          buyCount: '1',
          zwList: [],
          wzwList: [],
          showDoc: false,
          showT: false,
          isTip: false,
          study: true,
          holdRight: true,
          holdWrong: true,
          materialNameSTK:[],
      };
  },
  onLoad: function (options) {
      var that = this;      
      let userInfo = uni.getStorageSync('user');
      if (userInfo != null && userInfo != undefined && userInfo != {} && userInfo != '') {
          that.setData({
              isLogin: true,
              userInfo: userInfo
          });
      } else {
          uni.setStorageSync('inviteId', options.inviteId);
      }
      var id = options.id;
      that.getGoodsInfo(id);
      setTimeout(()=>{
          this.share();
      },2000)
  },
  onShow: function () {
      let userInfo = uni.getStorageSync('user');
      if (userInfo != null && userInfo != undefined && userInfo != {} && userInfo != '') {
          this.setData({
              isLogin: true,
              userInfo: userInfo
          });
      }
  },
  mounted(){
      uni.setStorage({
          key: 'WxCodeUrl',
          data:location.href
      });
  },
  methods: {
      getGoodsInfo: function (id) {
          var curUserId = 0;
          if (this.userInfo.userId) {
            curUserId = this.userInfo.userId;
          }
          var that = this;
          var data = {
              id: id,
              userId: curUserId
          };
          http.httpGet(config.clubApi.getMaterialInfojk, data, function (res) {
              if (res.code == '200') {
                  var goods = res.data;
                  that.showDoc = false;
                  if (goods.pay==true) {
                    that.showDoc = true;
                  }
                  goods.materialNameS = goods.materialName.replace(goods.materialKey,'<span style="color:#26aa4e;">'+goods.materialKey+'</span>');
                  that.materialNameSTK = goods.materialName.split(goods.materialKey);
                  let index = 1;
                  goods.listJk.forEach(item => {
                    if (item.id==goods.id) {
                      goods.index = index;
                    }
                    index++;
                  });
                  that.setData({
                      goods: goods                    
                  });
                  uni.setNavigationBarTitle({
                      title: goods.version
                  });
              }else {
                  uni.showToast({
                    title: res.msg,
                    icon: 'none',
                    duration: 3000
                  });
                  return;
              }
          });
      },
      showALL() {
          var curUserId = 0;
          if (this.userInfo.userId) {
            curUserId = this.userInfo.userId;
          }
          var that = this;
          that.zwList = [];
          that.wzwList = [];
          var data = {
              id: that.goods.id,
              userId: curUserId
          };
          http.httpGet(config.clubApi.getMaterialInfojk, data, function (res) {
              if (res.code == '200') {
                  var goods = res.data;
                  that.showDoc = false;
                  if (goods.pay==true) {
                    that.showDoc = true;
                  }
                  goods.materialNameS = goods.materialName.replace(goods.materialKey,'<span style="color:#26aa4e;">'+goods.materialKey+'</span>');
                  that.materialNameSTK = goods.materialName.split(goods.materialKey);
                  let index = 1;
                  goods.listJk.forEach(item => {
                    if (item.id==goods.id) {
                      goods.index = index;
                    }
                    index++;
                  });                  
                  that.setData({
                      goods: goods,
                      showT: false,
                      study: true,
                      holdRight: true,
                      holdWrong: true
                  });
                  uni.setNavigationBarTitle({
                      title: goods.version
                  });
              }
          });
      },
      showZW(e) {
          var curUserId = 0;
          if (this.userInfo.userId) {
            curUserId = this.userInfo.userId;
          }
          var that = this;
          
          if (e==1) {
            that.zwList = [];
            var data1 = {
                userId: curUserId,
                isHold: 1,
                pageNo: 1,
                pageSize: 99999999
            };          
            http.httpPost(config.clubApi.getMaterialjkList, data1, function (res) {
                if (res.code == '200') {
                  res.data.pageData.forEach(item => {
                    if (!that.zwList.includes(item.id)) {
                      that.zwList.push(item.id)
                    }
                  })                  
                  if (that.zwList.includes(that.goods.id)) {
                    that.holdRight = false;
                  }else {
                    that.holdRight = true;
                  }
                  if (that.wzwList.includes(that.goods.id)) {
                    that.holdWrong = false;
                  }else {
                    that.holdWrong = true;
                  }
                  console.log('that.zwList',that.zwList);
                  console.log('that.wzwList',that.wzwList);
                  console.log('that.goods.id',that.goods.id);
                  uni.showToast({
                      title: '获取掌握信息',
                      icon: 'none',
                      duration: 3000
                  });
                }
            });
          }else {
            that.wzwList = [];
            var data2 = {
                userId: curUserId,
                isHold: 0,
                pageNo: 1,
                pageSize: 99999999
            };          
            http.httpPost(config.clubApi.getMaterialjkList, data2, function (res) {
                if (res.code == '200') {
                  res.data.pageData.forEach(item => {                  
                    if (!that.wzwList.includes(item.id)) {
                      that.wzwList.push(item.id)
                    }
                  })
                  if (that.zwList.includes(that.goods.id)) {
                    that.holdRight = false;
                  }else {
                    that.holdRight = true;
                  }
                  if (that.wzwList.includes(that.goods.id)) {
                    that.holdWrong = false;
                  }else {
                    that.holdWrong = true;
                  }
                  uni.showToast({
                      title: '获取未掌握信息',
                      icon: 'none',
                      duration: 3000
                  });
                }
            });
          }
      },
      showJkT() {
          var curUserId = 0;
          if (this.userInfo.userId) {
            curUserId = this.userInfo.userId;
          }
          var that = this;
          var data = {
              id: that.goods.id,
              userId: curUserId
          };
          http.httpGet(config.clubApi.getMaterialInfojkt, data, function (res) {
              if (res.code == '200') {
                  that.goods.materialNameT = res.data.materialName;
                  if (that.showT) {
                    that.showT = false;
                  }else {
                    that.showT = true;
                  }
                  var goods = res.data;
                  that.showDoc = false;
                  if (goods.pay==true) {
                    that.showDoc = true;
                  }
                  goods.materialNameS = goods.materialName.replace(goods.materialKey,'<span style="color:#26aa4e;">'+goods.materialKey+'</span>');
                  goods.materialNametS = goods.materialNamet.replace(that.goods.materialNametk,'<span style="color:#26aa4e;">'+that.goods.materialNametk+'</span>');
                  that.setData({
                      goods: goods
                  });
              }else {
                  uni.showToast({
                    title: res.msg,
                    icon: 'none',
                    duration: 3000
                  });
                  return;
              }
          });
      },
      showStudy() {
        var that = this;
        if (that.study) {
          that.study = false;
          if (that.goods.materialNamet) {
            that.goods.materialNametS = that.goods.materialNamet.replace(that.goods.materialNametk,'<span style="color:#26aa4e;">'+that.goods.materialNametk+'</span>');
            that.materialNameSTK = that.goods.materialName.split(that.goods.materialKey);
          }else {
            that.showJkT();
          }
        }else {
          that.study = true;
          that.showJkT();
        }
      },
      isHold(e) {
        if (this.userInfo.userId) {
          if (e===1) {
            this.holdRight = false;
            this.holdWrong = true;
          }
          if (e===0) {
            this.holdRight = true;
            this.holdWrong = false;
          }
          var data = {
              appId: config.APPID,
              materialId: this.goods.id,
              userId: this.userInfo.userId,
              isHold: e
          };
          http.httpPut(config.clubApi.createHoldjk, data, function (res) {
          });
        }
      },
      playVoice() {
          var that = this;
          if (!that.goods.url) {
            var curUserId = 0;
            if (that.userInfo.userId) {
              curUserId = that.userInfo.userId;
            }            
            var data = {
                id: that.goods.id,
                userId: curUserId
            };
            http.httpGet(config.clubApi.playVoice, data, function (res) {
              that.goods.url = res.data;
            });            
          }
          let music = new Audio(that.goods.url);
          music.play();
      },
      toLeft() {
        let index = 0;
        this.goods.listJk.forEach(item => {
          if (item.id==this.goods.id) {
            return;
          }
          index++;
        });
        if (index-1>=0) {
          let goods = this.goods.listJk[index-1];
          goods.materialNameS = goods.materialName.replace(goods.materialKey,'<span style="color:#26aa4e;">'+goods.materialKey+'</span>');
          goods.materialNameT = goods.materialName;
          goods.listJk = this.goods.listJk;
          goods.jkNum = this.goods.jkNum;
          goods.jkNumZw = this.goods.jkNumZw;
          goods.jkNumWZw = this.goods.jkNumWZw;
          goods.index = index;
          if (this.zwList.includes(goods.id)) {
              this.holdRight = false;
          }else {
              this.holdRight = true;
          }
          if (this.wzwList.includes(goods.id)) {
              this.holdWrong = false;
          }else {
              this.holdWrong = true;
          }
          this.setData({
              goods: goods,
              showT: false,
              study: true
          });
        }
      },
      toRight() {
        let index = 0;
        this.goods.listJk.forEach(item => {
          if (item.id==this.goods.id) {
            return;
          }
          index++;
        });
        let goods = this.goods.listJk[index];
        goods.materialNameS = goods.materialName.replace(goods.materialKey,'<span style="color:#26aa4e;">'+goods.materialKey+'</span>');
        goods.materialNameT = goods.materialName;
        goods.listJk = this.goods.listJk;
        goods.jkNum = this.goods.jkNum;
        goods.jkNumZw = this.goods.jkNumZw;
        goods.jkNumWZw = this.goods.jkNumWZw;
        goods.index = index+1;
        if (this.zwList.includes(goods.id)) {
            this.holdRight = false;            
        }else {
            this.holdRight = true;            
        }
        if (this.wzwList.includes(goods.id)) {
            this.holdWrong = false;
        }else {
            this.holdWrong = true;
        }
        this.setData({
            goods: goods,
            showT: false,
            study: true
        });
      },
      getSignUrl(){
          var signLink = ''
          var ua = navigator.userAgent.toLowerCase();
          if (/iphone|ipad|ipod/.test(ua)) {
              signLink =uni.getStorageSync('WxCodeUrl');
              if(!signLink)signLink = location.href
          } else {
              signLink = location.href
          }
          return signLink;
      },
      stopSlide() {
        return;
      },
      showShare() {
        this.isTip = true;
      },
      share() {          
        var goods = this.goods;
        //var url = '/pages/detail/index?id=' + goods.id + '&inviteId=' + this.userInfo.userId;
        var curUrl = this.getSignUrl();
        var shareData = {
          title:goods.materialName,
          desc:goods.age+goods.gradeName+goods.semesterName,
          url:curUrl,
          image:'http://jkhmzw.shudingkj.com/static/images/logo.jpg'
        };          
        //这是后端写的接口，需要用后端返回内容配置微信分享的参数
        uni.request({
          method: 'GET',
          url: config.BASE_URL + '/auth/getWXInterface',
          data: {
            url:curUrl,
            appid:config.APPID
          },
          header: {
              'U-TOKEN': uni.getStorageSync('user') ? uni.getStorageSync('user').token : '/pages/detail/index',
              "Content-Type": "application/x-www-form-urlencoded"
          },
          success: (res) => {
              if (res.statusCode == 401) {
                  uni.setStorageSync('user', null);
              }
              if (typeof cb == 'function') {
                  cb(res.data, '');
              }
              uni.hideNavigationBarLoading();
              if (res.statusCode == '200') {
                const jsApiList=[
                  'checkJsApi', //检测接口权限	
                  'updateTimelineShareData',
                  'updateAppMessageShareData',
                  'openLocation',
                  'onMenuShareAppMessage', //老版本分享接口(注意这两个旧版本的必须要放的不然会有问题)
                  'onMenuShareTimeline', //老版本分享接口
                  'onMenuShareQQ', 
                  'onMenuShareQZone'
                ];
                wx.config({
                  debug:false,
                  appId:config.APPID,
                  timestamp:res.data.data.timestamp,
                  nonceStr:res.data.data.nonceStr,
                  signature:res.data.data.signature,					
                  jsApiList
                });
                wx.ready(() => {
                  var title = shareData.title
                  var imgUrl = shareData.image
                  var description = shareData.desc
                  var shareUrl = shareData.url
                  var tempParam = {
                    title: title,
                    desc: description,
                    link: shareUrl,
                    imgUrl: imgUrl,
                    success: (res) => {
                      console.log(res) 
                    },
                    cancel: function (res) {
                      console.log('分享失败', res)
                    },
                  }
                  if(wx.updateAppMessageShareData) {
                    wx.updateAppMessageShareData(tempParam);
                  } else {
                    wx.onMenuShareAppMessage(tempParam);
                  }
                });
                wx.error(function(res){
                  console.log(res.errMsg);
                })
                // 判断客户端是否支持指定js的接口
                wx.checkJsApi({
                  jsApiList,
                  success: function (res) {	       		
                    console.log('判断客户端支持js接口', res)
                  },
                })
              }
          },
          fail: (err) => {
              if (typeof cb == 'function') {
                  cb(null, err.errMsg);
              }
              uni.hideNavigationBarLoading();
          }
        })
      }
  }
};
</script>
<style lang="scss">
@import './index.scss';
</style>